<template>
  <div class="main">
    <div>
      <div class="content">
        <div class="content-box">
          <div class="content-box-title">还有最后一步，缴费{{orderPrice}}元，您就完成全部备案存证了</div>
          <div class="down">
            <div class="down-top">
              <div class="down-top-option">
                <div class="down-top-option-title">请选择支付方式</div>
                <div class="down-top-option-box">
                  <div
                    :class="angleShow=='2'? 'down-top-option-box-item action':'down-top-option-box-item'"
                    @click="angleChange('2')"
                  >
                    <img src="../../images/we-chat.png" alt />
                    微信支付
                    <div class="down-top-option-box-item-angle" v-show="angleShow=='2'">
                      <img src="../../images/angle.png" alt />
                    </div>
                  </div>

                  <div
                    :class="angleShow=='1'? 'down-top-option-box-item action':'down-top-option-box-item'"
                    @click="angleChange('1')"
                  >
                    <img src="../../images/alipay.png" alt />
                    支付宝支付
                    <div class="down-top-option-box-item-angle" v-show="angleShow=='1'">
                      <img src="../../images/angle.png" alt />
                    </div>
                  </div>
                </div>
              </div>
              <div class="down-top-hint">
                <p style="font-weight: 500;font-size: 18px;color: #000000;">
                  需付金额
                  <span
                    style="font-size: 26px;color: #EA4E3E;font-weight: bold;"
                  >￥{{ orderPrice }}</span>
                </p>
                <p style="font-size: 16px;font-weight: 500;color: #666666;margin-top: 5px;">
                  剩余时间
                  <span style="color:#EA4E3E;">{{shi}}时{{fen}}分{{miao}}秒</span>,否则无法完成备案存证
                </p>
              </div>
            </div>
            <div class="down-bottom">
              <img :src="payInfo" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-their">中国数字人知识产权存证保护平台</div>
  </div>
</template>

<script>
import { getPay, peopleInfo } from "@/utils/api";
export default {
  name: "personalView",
  components: {},
  data() {
    return {
      angleShow: "2",
      shi: "",
      fen: "",
      miao: "",
      orderNo: "",
      expire: "1800",
      orderPrice: "",
      payInfo: "",
      timekeeping: "",
      time: ""
    };
  },
  created() {
    clearInterval(this.timekeeping);
    this.timekeeping = null;
    this.orderNo = localStorage.getItem("orderNo");
    if (localStorage.getItem("expire")) {
      this.expire = localStorage.getItem("expire");
    }
    this.init();
    this.timer();
  },
  beforeDestroy() {
    clearInterval(this.timekeeping);
    this.timekeeping = null;
    clearInterval(this.time);
    this.time = null;
  },
  methods: {
    init() {
      getPay({ id: this.orderNo, type: this.angleShow }, res => {
        if (res.code === 200) {
          // 支付二维码
          this.payInfo = res.data.payInfo;
          // 查询是否支付完成
          this.inquire();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      });
    },
    inquire() {
      clearInterval(this.timekeeping);
      this.timekeeping = null;
      this.timekeeping = setInterval(() => {
        peopleInfo({ orderNo: this.orderNo }, res => {
          if (res.code === 200) {
            // 需付金额
            if (res.data.orderPrice != this.orderPrice) {
              clearInterval(this.timekeeping);
              this.init();
            }
            this.orderPrice = res.data.orderPrice;
            // 判断是是否支付完成
            if (res.data.payStatus === 2) {
              clearInterval(this.timekeeping);
              this.timekeeping = null;
              this.$message({
                message: "支付成功",
                type: "success"
              });
              setTimeout(() => {
                // 调用父组件中的方法
                this.$emit("handleChange");
              }, 1500);
            }
          }
        });
      }, 1000);
    },
    angleChange(index) {
      this.angleShow = index;
      this.init();
    },
    timer() {
      var item = this.expire;
      this.time = setInterval(() => {
        if (item > 0) {
          --item;
          this.formatSeconds(item);
        } else {
          clearInterval(this.time);
          this.time = null;
          this.$message({
            message: "支付倒计时已过",
            type: "error"
          });
          setTimeout(() => {
            // 调用父组件中的方法
            this.$emit("lastStep");
          }, 3000);
        }
      }, 1000);
      console.log(item);
    },

    // 倒计时
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "秒";

      this.miao = parseInt(secondTime);
      if (minuteTime > 0) {
        this.fen = parseInt(minuteTime);
        // result = "" + parseInt(minuteTime) + "分" + result;
      } else {
        this.fen = 0;
        // result = "" + 0 + "分" + result;
      }
      if (hourTime > 0) {
        this.shi = parseInt(hourTime);
        // result = "" + parseInt(hourTime) + "小时" + result;
      } else {
        this.shi = 0;
        // result = "" + 0 + "小时" + result;
      }
      // console.log('result',result, this.shi, this.fen, this.miao);

      return result;
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  min-height: 70vh;
  background-color: #ebf1fb;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: auto;
  &-their {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: absolute;
    bottom: 28px;
  }
}
.content {
  max-width: 1920px;
  min-width: 1440px;
  margin: auto;
  margin-bottom: 145px;
  margin-top: 30px;

  &-box {
    width: 1400px;
    margin: auto;
    background-color: #fff;
    padding: 70px 70px 96px;
    // outline: 2px solid red;
    &-title {
      width: 1260px;
      margin: auto;
      height: 74px;
      background: rgba(58, 123, 216, 0.1);
      color: #3a7bd8;
      font-weight: 500;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.down {
  width: 1260px;
  height: 430px;
  // outline: 2px solid blue;
  margin-top: 20px;
  padding: 30px 40px;
  &-top {
    display: flex;
    justify-content: space-between;
    &-option {
      &-title {
        font-size: 16px;
        font-weight: 500;

        color: #666666;
      }
      &-box {
        display: flex;
        &-item {
          margin-top: 16px;
          margin-right: 20px;
          width: 180px;
          height: 60px;
          border: 1px solid #dddddd;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          cursor: pointer;
          > img {
            width: 28px;
            height: 25px;
            margin-right: 5px;
          }
          &-angle {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            > img {
              width: 100%;
            }
          }
        }
      }
    }
  }
  &-bottom {
    width: 229px;
    height: 229px;
    border: 1px solid #3a7bd8;
    margin: 27px auto 0;
    // padding: 20px 18px 18px 20px;
    > img {
      width: 100%;
    }
  }
}
.action {
  border: 1px solid #3a7bd8;
}
</style>
